<template>
  <div id="app">
    <div class="header">
      <Logo></Logo>

      <div class="menus">
        <Menu v-for="menu in menus" :key="menu.id" :menu="menu"></Menu>
      </div>
      <Clock
        formatter="yyyy-MM-dd cccc HH:mm:ss"
        @hour-change="hourChange($event)"
      ></Clock>

      {{ userName }}

      <!-- <button @click="login">登录</button> -->
    </div>
    <div class="main">
      <router-view />
    </div>
    <div class="footer">Footer</div>
  </div>
</template>

<script>
import Logo from "./components/Logo.vue";
import Clock from "./components/Clock.vue";
import Menu from "./components/Menu.vue";

import { mapGetters, mapActions, mapState } from "vuex";

export default {
  data() {
    return {
      showClock: true,
    };
  },
  components: {
    Logo,
    Menu,
    Clock,
  },

  computed: {
    ...mapGetters(["userName"]),
    ...mapState(["menus"]),
  },

  methods: {
    hourChange(time) {
      console.log("hour change", time);
    },

    ...mapActions(["login", "loadMenus"]),
  },

  beforeCreate() {},

  mounted() {
    this.login();
    this.loadMenus();
  },
};
</script>

<style lang="scss">
@import "styles/normalize.css";

html,
body {
  height: 100%;
}
</style>

<style lang="scss" scoped>
#app {
  height: 100%;
  display: flex;
  flex-direction: column;

  overflow: hidden;

  background: url("assets/app-bg.png") center no-repeat;
  background-size: 100% 100%;

  padding: 10px 20px;
}

.main {
  flex: 1;
  color: #fff;
}

.header {
  display: flex;
  justify-content: space-between;

  .menus {
    display: flex;
    justify-content: space-evenly;

    height: 20px;

    flex: 1;

    .link {
      color: white;
    }
  }
}
</style>
